<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { pickUp } from '@/apis/task.js'
const comeImgs = ref([])
const goodImgs = ref([])
let id = ref()
onLoad((query) => {
	console.log('提货id', query.id)
	id = query.id
})
//校验是否上传了图片
const enableSubmit = computed(() => {
	return comeImgs.value.length > 0 && goodImgs.value.length > 0
})

//提交表单
const submit = async () => {
	// 表单数据
	const formData = {
		id,
		cargoPickUpPictureList: comeImgs.value.map((item) => ({ url: item.url })),
		cargoPictureList: goodImgs.value.map((item) => ({ url: item.url }))
	}
	await pickUp(formData)
	//提示用户
	setTimeout(() => {
		uni.showToast({
			title: '提货成功'
		})
	}, 1000)
	uni.reLaunch({
		url: '/subpkg_task/detail/index?id=' + id
	})
	console.log('提交表单')
}
</script>
<template>
	<view class="page-container">
		<view class="receipt-info">
			<uni-file-picker v-model="comeImgs" file-extname="jpg,webp,gif,png" limit="3" title="请拍照上传回单凭证"></uni-file-picker>
			<uni-file-picker v-model="goodImgs" file-extname="jpg,webp,gif,png" limit="3" title="请拍照上传货品照片"></uni-file-picker>
		</view>
		<button :disabled="!enableSubmit" @click="submit" class="button">提交</button>
	</view>
</template>

<style lang="scss" scoped>
.page-container {
	padding: 30rpx;
}

.receipt-info {
	min-height: 600rpx;
	background-color: #fff;
	padding: 20rpx 30rpx;
	border-radius: 16rpx;

	::v-deep .uni-file-picker {
		margin-bottom: 30rpx;
	}
}

.button {
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	/* #ifdef APP */
	padding-top: 4rpx;
	/* #endif */
	border-radius: 100rpx;
	margin-top: 60rpx;
	color: #fff;
	font-size: $uni-font-size-big;
	background-color: $uni-primary;

	&[disabled],
	&.disabled {
		color: #fff;
		background-color: #fadcd9;
	}
}
</style>
